import { defineComponent, ref, onMounted } from 'vue'
import { NTable, NCode } from 'naive-ui'
import pageStyle from './styles/index.module.scss'
import MessageBox from '@/components/nComponents/MessageBox'
export default defineComponent({
  emits: ['loaded'],
  setup(props, { emit, expose }) {
    const slOne = `
 switch (value) {
    case '10:30':
      backText = '十点半的飞机已经到了';
      break;
    case '10:29':
      backText = '虽然差不多了，请把时间调到 10:30';
      break;
    default:
      backText = '请把时间调到 10:30';
      break;
  }
`
    const show = ref(false)
    const open = () => {
      show.value = true
    }
    expose({
      open
    })
    const handOpen = (url: string) => {
      window.open(url)
    }

    onMounted(() => {
      emit('loaded')
    })
    return () => (
      <>
        <MessageBox
          width="600px"
          title="表项的反馈信息"
          v-model={show.value}
          v-slots={{
            default: () => (
              <>
                <div class={pageStyle.illustrate}>
                  <div
                    class="desc"
                    onClick={() =>
                      handOpen(
                        'https://www.naiveui.com/zh-CN/light/components/form#FormItemGi-Props'
                      )
                    }
                  >
                    点我跳转参考文档
                  </div>
                  <NTable bordered={true} single-line={false}>
                    <thead>
                      <tr>
                        <th>内置参数</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>value</td>
                        <td>输入文本,可能为空</td>
                      </tr>
                    </tbody>
                  </NTable>
                  <NTable class="mt-[20px]" bordered={true} single-line={false}>
                    <thead>
                      <tr>
                        <th>返回值</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>backText</td>
                        <td>对此赋值</td>
                      </tr>
                    </tbody>
                  </NTable>
                  <div class="mt20 desc">示例</div>
                  <div class="example">
                    <NCode code={slOne} language="js" word-wrap={true} show-line-numbers />
                  </div>
                </div>
              </>
            )
          }}
        />
      </>
    )
  }
})
